<template>
  <div>
    <!-- 关注详情 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors"><span class="fenge">/</span>关注管理</b>
      <router-link to="/AlreadyFollow">
      <b>/<img :src="require('/src/assets/img/service.png')" />关注列表</b>
      </router-link>
      <b><span class="fenge">/</span>详情</b>
    </div>
    <el-card class="cardTits" shadow="hover" v-if="Object.keys(infoObj).length > 0">
      <div class="details-box">
        <div class="details-title">详情</div>
        <el-divider></el-divider>
      </div>
      <div class="details-table" v-if="infos.plateMode === 0">
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">姓名</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalName }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">身份证号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalIdcard }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">银行名称</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.sevicerPo.bankName }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">银行卡号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.sevicerPo.bankNo }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">手机号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalPhone }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">申请关注时间</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ format('yyyy-MM-dd hh:mm:ss', new Date(infoObj.attentionInfoPo.createTime)) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">附件</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.kbSelfBusinessPo.platformAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.kbSelfBusinessPo.platformAgreementUrl)">查看附件</el-link>
            </div>
          </el-col>
          <!-- <el-col :span="4">
            <div class="box-col col-title">个体户办理日期</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ format('yyyy-MM-dd', new Date(infoObj.kbSelfBusinessPo.openTime)) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">授权委托书</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.sevicerPo.authAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.sevicerPo.authAgreementUrl)">查看授权委托书</el-link>
            </div>
          </el-col> -->
          <el-col :span="4">
            <div class="box-col col-title">平台协议书</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.sevicerPo.platformAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.sevicerPo.platformAgreementUrl)">查看平台协议书</el-link>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="4">
            <div class="box-col col-title img-height">身份证正面</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <el-image
                style="width: 160px; height: 80px"
                :src="infoObj.sevicerPo.idcardFrondUrl"
                :preview-src-list="[infoObj.sevicerPo.idcardFrondUrl]">
              </el-image>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title img-height">身份证反面</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <el-image
                style="width: 160px; height: 80px"
                :src="infoObj.sevicerPo.idcardBackUrl"
                :preview-src-list="[infoObj.sevicerPo.idcardBackUrl]">
              </el-image>
            </div>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="4">
            <div class="box-col col-title img-height">营业执照</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <template v-if="infoObj.kbSelfBusinessPo.licenseUrl == null">-</template>
              <el-image
                v-else
                style="width: 160px; height: 80px"
                :src="infoObj.kbSelfBusinessPo.licenseUrl"
                :preview-src-list="[infoObj.kbSelfBusinessPo.licenseUrl]">
              </el-image>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title img-height">意愿协议视频</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <template v-if="infoObj.sevicerPo.wishVideoUrl == null">-</template>
              <div class="video-box" @click="openVideo" v-else>
                <div style="position: relative; width:100%;height:100%;">
                  <video style="width:100%;height:100%;" :src="infoObj.sevicerPo.wishVideoUrl"></video>
                  <div style="position: absolute; left: 0; left: 0;width:100%;height:100%;background-color: #FFF;top: 0;opacity: 0;"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row> -->
      </div>
      <div class="details-table" v-if="infos.plateMode === 1">
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">姓名</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalName }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">身份证号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalIdcard }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">银行名称</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.sevicerPo.bankName }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">银行卡号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.sevicerPo.bankNo }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">手机号</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ infoObj.kbSelfBusinessPo.legalPhone }}</div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">关注时间</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ format('yyyy-MM-dd hh:mm:ss', new Date(infoObj.attentionInfoPo.createTime)) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">附件</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.kbSelfBusinessPo.platformAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.kbSelfBusinessPo.platformAgreementUrl)">查看附件</el-link>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">个体户办理日期</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">{{ format('yyyy-MM-dd', new Date(infoObj.kbSelfBusinessPo.openTime)) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title">授权委托书</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.sevicerPo.authAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.sevicerPo.authAgreementUrl)">查看授权委托书</el-link>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title">平台协议书</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content">
              <template v-if="infoObj.sevicerPo.platformAgreementUrl == null">-</template>
              <el-link v-else type="primary" href="javascript:void(0)" @click="openUrl(infoObj.sevicerPo.platformAgreementUrl)">查看平台协议书</el-link>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="4">
            <div class="box-col col-title img-height">身份证正面</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <el-image
                style="width: 160px; height: 80px"
                :src="infoObj.sevicerPo.idcardFrondUrl"
                :preview-src-list="[infoObj.sevicerPo.idcardFrondUrl]">
              </el-image>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title img-height">身份证反面</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <el-image
                style="width: 160px; height: 80px"
                :src="infoObj.sevicerPo.idcardBackUrl"
                :preview-src-list="[infoObj.sevicerPo.idcardBackUrl]">
              </el-image>
            </div>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="4">
            <div class="box-col col-title img-height">营业执照</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <template v-if="infoObj.kbSelfBusinessPo.licenseUrl == null">-</template>
              <el-image
                v-else
                style="width: 160px; height: 80px"
                :src="infoObj.kbSelfBusinessPo.licenseUrl"
                :preview-src-list="[infoObj.kbSelfBusinessPo.licenseUrl]">
              </el-image>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box-col col-title img-height">意愿协议视频</div>
          </el-col>
          <el-col :span="8">
            <div class="box-col col-content img-height">
              <template v-if="infoObj.sevicerPo.wishVideoUrl == null">-</template>
              <div class="video-box" @click="openVideo" v-else>
                <div style="position: relative; width:100%;height:100%;">
                  <video style="width:100%;height:100%;" :src="infoObj.sevicerPo.wishVideoUrl"></video>
                  <div style="position: absolute; left: 0; left: 0;width:100%;height:100%;background-color: #FFF;top: 0;opacity: 0;"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog title="意见协议视频" v-model="playerVideo" @close="closeVideo" width="780px" height="400px">
			<div class="videoPlayer-style">
				<video ref="videoPlayer" class="vjs-default-skin" :src="infoObj.sevicerPo.wishVideoUrl" controls="controls">
				</video>
			</div>
		</el-dialog>
  </div>
</template>

<script>
export default {
  name: "DetailsFollow",
  data() {
    return {
      infos: JSON.parse(localStorage.getItem("bussines_info")),
      // infos: {
      //   plateMode: 1
      // },
      infoObj: {},
      playerVideo: false
    };
  },
  components: {},
  mounted() {
    this.getAlreadyDetails()
  },
  methods: {
    closeVideo() {
      // 隐藏意愿协议视频
      this.$refs.videoPlayer.pause()
      this.playerVideo = false
    },
    openVideo() {
      // 显示意愿协议视频
      this.playerVideo = true
    },
    openUrl(url) {
      // 打开新窗口查看pdf
      this.$http({
        url: "/api/quick/server/consumer/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
    },
    getAlreadyDetails() {
      // 获取关注详情
      this.$http({
        url: "/api/quick/attention/selectAttentionDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          "selfBusinessId": this.$route.query.id
        },
      }).then((data) => {
        if (data.code == 0) {
          this.infoObj = data.result
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.details-box {
  margin-left: 59px;
  margin-top: 30px;
  .details-title {
    color: #0A2E6A;
    font-size: 14px;
  }
}
.details-table {
  margin: 0 59px;
  font-size: 14px;
  border: 1px solid #EEF4FB;
  .box-col {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 26px;
    border: 1px solid #EEF4FB;
    border-top: 0;
    border-right: 0;
  }
  .col-title {
    background-color: #F6F9FD;
    color: #6C8198;
  }
  .col-content {
    color: #0A2E6A;
  }
  .img-height {
    height: 140px;
  }
  .video-box {
    width: 108px;
    height: 68px;
    border: 1px solid #E0EAF6;
    padding: 10px;
    margin-right: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}
.videoPlayer-style {
  width: 740px;
  height: 360px;
  text-align: center;
}
.vjs-default-skin {
  width: 740px !important;
  height: 360px !important;
  padding-top: 0 !important;
}
</style>
<style>
.details-table .el-row .el-col:first-child .box-col {
  border-left: 0;   
}
.details-table .el-row:last-child .el-col .box-col {
  border-bottom: 0;   
}
.el-link.el-link--primary {
  color: #326CF0;
  font-weight: normal;
}
</style>